---
---

<!DOCTYPE html>
<html class="default-theme" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="{{ site.name }}" />
  <meta name="description" content="{{ site.description }}">

  <title>{% if page.title %}{{ page.title }} ¨C {% endif %}{{ site.name }}</title>

  <link rel="stylesheet" type="text/css" href="/hy5b/frontend/style/reset/reset.css">
  <style>
    html, body {
      height: 100%;
      overflow: hidden;
    }
    .graph-list {
      position: relative;
      top: 50%;
      padding: 0 ;
      margin: -64px 0 0 0;
      list-style: none;
      text-align: center;
    }
    .graph-list li {
      display: inline-block;
      /*border: 1px solid red;*/
    }
    .graph-list .graph {
      margin-right: 128px;
    }
  </style>
</head>

<body>

  <ul class="graph-list">
    <li class="graph">
      <canvas id="point" width="128" height="128"></canvas>
    </li>
    <li class="graph">
      <canvas id="line" width="128" height="128"></canvas>
    </li>
    <li class="graph">
      <canvas id="square" width="128" height="128"></canvas>
    </li>
    <li>
      <canvas id="cube" width="128" height="128"></canvas>
    </li>
  </ul>
  <script>

  (function() {

    var graphs = {
      line: [[14, 64], [114, 64]],
      square: [[14, 14], [114, 14], [114, 114], [14, 114], [14, 14]],
      cube: [[2, 28], [100, 28], [100, 126], [2, 126], [2, 28], [28, 2], [126, 2], [126, 100],
        [100, 126], [100, 28], [126, 2]]
    }

    drawPoint('point', { x: 64, y: 64, radius: 2 })

    for (var id in graphs) {
      drawLine(id, { points: graphs[id] })
    }

    function drawPoint(id, props) {
      var elem = document.getElementById(id);
      var ctx = elem.getContext("2d");
      ctx.beginPath();
      ctx.arc(props.x, props.y, props.radius, 0, 2 * Math.PI);
      ctx.fill();
    }

    function drawLine(id, props) {
      var elem = document.getElementById(id);
      var ctx = elem.getContext("2d");
      ctx.beginPath();
      ctx.lineWidth = 4;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      var points = props.points;
      ctx.moveTo(points[0][0], points[0][1]);
      for (var i = 0; i < points.length; i++) {
        ctx.lineTo(points[i][0], points[i][1]);
      }
      ctx.stroke();
    }
  }());
  
  </script>

</body>

</html>
